<template>
    <div class="comment">
     <div class="comment-top">
         <div class="comment-top-l">用户评价</div>
         <div class="comment-top-r">更多</div>
     </div>
     <div class="comment-middle">
         <img :src="commentInfo.user.avatar" alt="">
         <span>{{commentInfo.user.uname}}</span>
     </div>
     <div class="comment-bottom">
         <p>{{commentInfo.content}}</p>
         <div class="a">
             <div class="a-l">{{commentInfo.created|formatData}}</div>
             <div class="a-r">{{commentInfo.style}}</div>
         </div>
         <img :src="item" alt="" v-for="item in commentInfo.images" :key="item">
     </div>
    </div>
</template>
<script>
import {formatDate} from 'common/utils'
export default {
    name:'DetailComment',
    props:{
        commentInfo:{
        type:Object,
        default(){
            return {}
        }
        }
    },
    filters:{
        formatData(value){
            const date=new Date(value*1000);
            return formatDate(date,'yyyy-MM-dd')
        }
    }
}
</script>
<style scoped>
.comment{ 
    border-bottom: 5px solid #f2f5f8;
    padding: 0 10px;
}
.comment .comment-top{
    display:flex;
    justify-content: space-between;
    border-top: 1px solid #d7d8da;
    border-bottom: 1px solid #d7d8da;
    text-align: center;
    padding: 10px 0;
    color: #000;
}
.comment-middle img{
    width: 50px;
    height: 50px;
    padding: 10px 15px 0 0;
}
.comment-middle span{
    color: #000;
    }
.comment-bottom{
    margin-top: 10px;
    }
.comment-bottom p{
    font-size: 14px;
    margin-bottom: 8px;
    color:gray;}
.comment-bottom .a{
    display: flex;
    font-size: 14px;
    margin-bottom: 8px;
    color: rgb(167, 160, 160);
    }
.comment-bottom .a-l{
    margin-right: 5px;
    }
.comment-bottom img{
    width: 150px;
    height: 150px;
    padding: 0 5px 0 0;
    }
</style>